<template>
  <div class="minLogin">
    <a-spin :spinning="loading" style="background: #fff; border-radius: 3%; padding: 20px 30px 10px 30px">
        <a-tabs
          :activeKey="customActiveKey"
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
          @change="handleTabClick"
          style=""
        >
          <!-- <a-tab-pane key="tab1" tab="账号密码登录">
              <PasswordLogin></PasswordLogin>
          </a-tab-pane> -->
          <a-tab-pane key="tab2" tab="手机号登录">
              <PhoneLogin></PhoneLogin>
          </a-tab-pane>
        </a-tabs>
    </a-spin>
  </div>
</template>

<script>
import TokenCache from '@/utils/cache/TokenCache'
import PhoneLogin from './PhoneLogin.vue'
import PasswordLogin from './PasswordLogin.vue'

export default {
  components:{
      PhoneLogin, PasswordLogin
  },
  data() {
    return {
      loading: false,
      customActiveKey: 'tab2',
    }
  },
  methods: {
    handleTabClick(key) {
      this.customActiveKey = key
    }
  },
}
</script>

<style lang="less" scoped>
.minLogin {
  margin: 20px auto 50px;
  width: 368px;
  text-align: left;
}
</style>
